<template>
  <div class="product">
    <!-- 横向排列 -->
    <!-- <ul>
        <li>
            <img src="../assets/img/1.jpg" alt="">
            <span>缤纷彩虹曲奇饼</span>
        </li>
        <li>
            <img src="../assets/img/2.jpg" alt="">
            <span>女士单肩手提包</span>
        </li>
        <li>
            <img src="../assets/img/3.jpg" alt="">
            <span>berbo蛋糕</span>
        </li>
        <li>
            <img src="../assets/img/4.jpg" alt="">
            <span>巧克力甜甜圈</span>
        </li>
        <li>
            <img src="../assets/img/5.jpg" alt="">
            <span>室内小盆绿植盆栽</span>
        </li>

        优化
        <li v-for="(item,index) in top5" :key="index">
           <img :src="require('@/assets/'+item.imgURL)">
           <span>{{item.title}}</span>
        </li>
    </ul> -->
    <div class="traffic-chart">
      <h2>流量榜TOP5</h2>
      <ul>
        <li v-for="(item, index) in trafficTop5" :key="index">
          <div class="img-container">
            <img :src="require('@/assets/'+item.imgURL)" alt="">
            <div class="info-overlay">
              <span class="title">{{ item.title }}</span>
              <span class="visits">访问量：{{ item.visits }}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <!-- 选项卡 -->
    <div class="cursor">
        <!-- 按钮区域 -->
        <div class="btnlist">
        <button :class="{ active: activeTab === 'sale' }" @click="switchTab('sale')">畅销榜</button>
        <button :class="{ active: activeTab === 'heat' }" @click="switchTab('heat')">热量榜</button>
        </div>

        <!-- 展示区 -->
         <table border="1" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <th>id</th>
                <th>标题</th>
                <th>图片</th>
                <th>上架时间</th>
                <th v-show="activeTab === 'sale'">畅售</th>
                <th v-show="activeTab === 'heat'">热度</th>
            </tr>
                <tr v-for="(item,index) in sortrdList" :key="index">
                    <td>{{item.id}}</td>
                    <td>{{item.title}}</td>
                    <td><img :src="require('@/assets/'+item.imgURL)" width="100"></td>
                    <td>{{formatTime(item.createTime)}}</td>
                    <td v-show="activeTab === 'sale'">{{ item.sale }}</td>
                    <td v-show="activeTab === 'heat'">{{ item.hot }}</td>
                </tr>
        </table>
    </div>
  </div>
</template>

<script>
import ImgList from '@/assets/index.js'
export default {
    name:'ProductList',
    data(){
        return{
           ImgList: ImgList.ImgList,
            activeTab:'sale'
        }
    },
    computed:{
        // 过滤后的基础数据
        filteredList(){
            return this.ImgList.filter(item=>item.grounding)
        },
        // top5(){
        //     return this.ImgList.slice(0,5);
        // },
        trafficTop5() {
      return [...this.filteredList]
        .sort((a, b) => b.visits - a.visits)
        .slice(0, 5)
    },
        // 排序后的列表
        sortrdList(){
            // 创建副本避免修改原数组
            const arr = [...this.filteredList];

            if(this.activeTab==='sale'){
                return arr.sort((a,b)=> b.sale - a.sale).slice(0,10)
            }
            return arr.sort((a,b)=> b.hot -a.hot).slice(0,10)
        },
        //   sj(){
        //     return this.ImgList
        // }
    },
    methods:{
        formatTime(timestamp){
            const date =new Date(timestamp*1000); //转为毫秒
            return date.toLocaleString(); 
        },
        // salelist(){
        //     this.a=false
        //     this.b=true
        // },
        // hotlist(){
        //     this.a=true
        //     this.b=false
        // }
        switchTab(tab){
            this.activeTab=tab
        }
    }
}
</script>

<style scoped>
.product{
    width: 100%;
    height: 100%;
  margin: 20px auto;
  padding: 20px;

  /* 新增滚动设置 */
  height: calc(100vh - 100px); /* 根据实际情况调整高度 */
  overflow-y: auto; /* 启用垂直滚动 */
}
/* .product ul{
    width: 95%;
    height: 210px;
    margin: 30px auto;
    background-color: coral;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.product ul li{
    width: 19%;
    height: 100%;
    background-color: rgba(254, 154, 54, 0.7);
    text-align: center;
}
.product ul li aside{
    position: absolute;
    right: 0;
    top: 0;
}
.product ul li img{
    width: 85%;
    margin-top: 10px;
}
.product ul li span{
    display: block;
    width: 100%;
    margin-top: 8px;
} */

.product .cursor{
    width: 95%;
    overflow: hidden;
    margin: 0 auto;
    background-color: rgba(524, 154, 54, 0.7);
}
.product .cursor .btnlist{
    width: 100%;
    overflow: hidden;
    border-bottom: 2px dotted white;
}
.product .cursor .btnlist button{
    border: none;
    background-color: rgba(254, 154, 54, 0.7);
    border: 1px solid rgb(254, 154, 54);
    color: white;
    width: 200px;
    height: 50px;
}
.product .cursor .btnlist button.active{
    background-color: white;
    color: orange;
    border: 1px solid gold;
}
.product ul li img{
    width: 85%;
    height: 150px;
    object-fit: cover;
    margin-top: 10px;
}
.product .cursor table{
    text-align: center;
    height: 10%;
}
.traffic-chart {
  width: 95%;
  margin: 20px auto;
  padding: 15px;
  background: rgba(254, 154, 54, 0.1);
}

.traffic-chart h2 {
  color: #ff6b00;
  margin-bottom: 15px;
}

.traffic-chart ul {
  display: flex;
  justify-content: space-between;
  gap: 1%;
  padding: 0;
  list-style: none;
}

.traffic-chart li {
  flex: 1;
  position: relative;
  transition: transform 0.3s;
}

.traffic-chart li:hover {
  transform: translateY(-5px);
}

.img-container {
  position: relative;
  height: 250px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: white;
}

.title {
  display: block;
  font-size: 16px;
  margin-bottom: 5px;
}

.visits {
  display: block;
  font-size: 14px;
  color: #ffd700;
}
</style>